<template>
  <div class="box">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h3 style="display: inline">原始文本的预测：(可接受最大排名: {{ maxRank }})</h3>
          <el-button class="button" type="primary" style="float:right;" round
                     @click="onClose">
            关闭
          </el-button>
        </div>
      </template>
      <el-row v-loading="loading" element-loading-text="模型计算中" style="height: auto">
        <div style="text-align: left"
             v-for="(each, index) in wordData"
             :key="'true-text-prediction-task-' + cardIndex + '-word-' + index">
          <el-popover
              placement="right"
              :width="300"
              trigger="click"
          >
            <template #reference>
              <div :style="'background-color: ' + gradientColor(each['prediction'][0]['rank'])"
                   class="word-block">
                <el-button>{{ each['word'] }}</el-button>
              </div>
            </template>
            <el-table :data="each['prediction']" max-height="600">
              <el-table-column width="75" property="word" label="字">
                <template #default="scope">
                  <h3 v-if="scope.row.word === each['word']">{{ scope.row.word }}</h3>
                  <span v-if="scope.row.word !== each['word']">{{ scope.row.word }}</span>
                </template>
              </el-table-column>
              <el-table-column width="75" property="rank" label="排名"></el-table-column>
              <el-table-column width="150" property="possibility" label="概率"></el-table-column>
            </el-table>
          </el-popover>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "TrueTextPredictionTaskCard",
  data() {
    return {
      loading: true,
      wordData: [],
      startColor: '#25aa0e',
      endColor: '#e80800',
    }
  },
  props: {
    text: String,
    cardIndex: Number,
    maxRank: Number,
    topN: Number
  },
  mounted() {
    this.axios.get('/true_text_prediction', {
      params: {
        text: this.text,
        top_n: this.topN
      }
    }).then(response => {
      this.wordData = response.data
      this.loading = false
    }).catch(err => {
      ElMessage('获取文本预测失败, 详情见控制台')
      console.log(err)
    })
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
    colorRgb(sColor) {
      let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
      sColor = sColor.toLowerCase();
      if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
          let sColorNew = "#";
          for (let i = 1; i < 4; i += 1) {
            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
          }
          sColor = sColorNew;
        }
        //处理六位的颜色值
        let sColorChange = [];
        for (let i = 1; i < 7; i += 2) {
          sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
        }
        return sColorChange;
      } else {
        return sColor;
      }
    },
    gradientColor(rank) {
      /**
       * @param {rank}：当前阶段
       */
      rank = Number(rank)
      rank = Math.min(rank, this.maxRank)
      let startRGB = this.colorRgb(this.startColor),//转换为rgb数组模式
          startR = startRGB[0], startG = startRGB[1], startB = startRGB[2],
          endRGB = this.colorRgb(this.endColor), endR = endRGB[0], endG = endRGB[1], endB = endRGB[2],
          sR = (endR - startR) / this.maxRank,
          sG = (endG - startG) / this.maxRank,
          sB = (endB - startB) / this.maxRank;

      return this.colorHex(
          'rgb(' + parseInt((sR * rank + startR))
          + ',' + parseInt((sG * rank + startG))
          + ',' + parseInt((sB * rank + startB)) + ')')
    },
    colorHex(rgb) {
      let _this = rgb;
      let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
      if (/^(rgb|RGB)/.test(_this)) {
        let aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
        let strHex = "#";
        for (let i = 0; i < aColor.length; i++) {
          let hex = Number(aColor[i]).toString(16);
          hex = hex < 10 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位
          if (hex === "0") {
            hex += hex;
          }
          strHex += hex;
        }
        if (strHex.length !== 7) {
          strHex = _this;
        }
        return strHex;
      } else if (reg.test(_this)) {
        let aNum = _this.replace(/#/, "").split("");
        if (aNum.length === 6) {
          return _this;
        } else if (aNum.length === 3) {
          let numHex = "#";
          for (let i = 0; i < aNum.length; i += 1) {
            numHex += (aNum[i] + aNum[i]);
          }
          return numHex;
        }
      } else {
        return _this;
      }
    }
  }
}
</script>

<style scoped>
.box {
  box-shadow: 0 6px 8px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 4px;
  padding: 5px 10px 10px 10px;
}

.word-block {
  padding-top: 10px;
  margin-bottom: 10px;
}

.card-header {
  text-align: left;
}

</style>